<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<h1 id="angularjs-">AngularJS概述</h1>
<h2 id="angularjs-">AngularJS简介</h2>
<h3 id="-angularjs-">什么是 AngularJS？</h3>
<blockquote>
<p>&quot;AngularJS 是专门为应用程序设计的 HTML。&quot;</p>
<blockquote>
<p>AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。</p>
</blockquote>
<ol>
<li>AngularJS 把应用程序数据绑定到 HTML 元素。</li>
<li>AngularJS 可以克隆和重复 HTML 元素。</li>
<li>AngularJS 可以隐藏和显示 HTML 元素。</li>
<li>AngularJS 可以在 HTML 元素&quot;背后&quot;添加代码。</li>
<li>AngularJS 支持输入验证。</li>
</ol>
</blockquote>
<h3 id="angularjs-">AngularJS 历史</h3>
<pre><code>AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。
AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。
这是一个非常好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护这个库。
</code></pre><h3 id="angularjs-">AngularJS特点</h3>
<blockquote>
<ol>
<li><p>angular通过新的属性和表达式扩展html  </p>
</li>
<li><p>angular可以构建一个单页面应用程序 single page application</p>
</li>
</ol>
</blockquote>
<h3 id="angularjs-">AngularJS 简介</h3>
<blockquote>
<p>AngularJS 是一个 JavaScript 框架。它可通过 script 标签添加到 HTML 页面。</p>
<blockquote>
<p>注意事项: </p>
<blockquote>
<p>我们建议把脚本放在 <body> 元素的底部。</p>
<p>这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。</p>
</blockquote>
</blockquote>
<p>AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。</p>
</blockquote>
<h3 id="angularjs-html">AngularJS 扩展了 HTML</h3>
<pre><code>AngularJS 通过 ng-directives(指令名) 扩展了 HTML。ng-是angular指令的前缀

1. ng-app 指令定义一个 AngularJS 应用程序。

2. ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

3. ng-bind 指令把应用程序数据绑定到 HTML 视图。

4. ng-init 初始化应用程序变量
</code></pre><h2 id="angularjs-">angularjs的组成</h2>
<blockquote>
<p>angularjs的组成可以分成三部分</p>
<blockquote>
<ol>
<li>view(视图),即html</li>
<li>model(模型)也就是数据</li>
<li>controller(控制器),javascrpt函数,可以添加或修改数据</li>
</ol>
</blockquote>
</blockquote>
<h2 id="-">基本示例</h2>
<h3 id="-1">基本示例1</h3>
<blockquote>
<p>ng-app  ng-model ng-bind的使用</p>
<blockquote>
<ol>
<li><p>ng-app 指令定义一个 AngularJS 应用程序。</p>
</li>
<li><p>ng-model 指令把元素值（比如输入域的值）绑定到应用程序。</p>
</li>
<li><p>ng-bind 指令把应用程序数据绑定到 HTML 视图。</p>
<blockquote>
<p>　<strong>v-bind绑定的是i标签的nnerHTML</strong></p>
</blockquote>
</li>
</ol>
</blockquote>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--ng-app 指令告诉 AngularJS，&lt;div&gt; 元素是 AngularJS 应用程序 的&quot;所有者&quot;。--&gt;
        &lt;div ng-app=&quot;&quot;&gt;

            &lt;!--ng-model 指令把输入域的值绑定到应用程序变量 name。--&gt;
            &lt;p&gt;名字 : &lt;input type=&quot;text&quot; ng-model=&quot;name&quot;&gt;&lt;/p&gt;

            &lt;!--ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。--&gt;
            &lt;h1 ng-bind=&quot;name&quot;&gt;hello&lt;/h1&gt;


        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h3 id="-2">基本示例2</h3>
<blockquote>
<p>ng-init的使用</p>
<blockquote>
<p>ng-init 初始化应用程序变量</p>
</blockquote>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--ng-app 指令告诉 AngularJS，&lt;div&gt; 元素是 AngularJS 应用程序 的&quot;所有者&quot;。--&gt;
        &lt;div ng-app=&quot;&quot;&gt;

            &lt;!--ng-model 指令把输入域的值绑定到应用程序变量 name。--&gt;
            &lt;p&gt;名字 : &lt;input type=&quot;text&quot; ng-model=&quot;name&quot;&gt;&lt;/p&gt;

            &lt;!--ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。--&gt;
            &lt;h1 ng-bind=&quot;name&quot;&gt;hello&lt;/h1&gt;


        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h3 id="-3">基本示例3</h3>
<blockquote>
<p>data- html5中自定义属性的应用</p>
<blockquote>
<p>AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。</p>
</blockquote>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
&lt;!--

    在html5中，允许自定义属性，使用data-

    AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。


--&gt;
    &lt;body&gt;

        &lt;div data-ng-app=&quot;&quot; data-ng-init=&quot;name=&#39;高辉&#39;&quot; &gt;
            &lt;p&gt;名字 : &lt;input type=&quot;text&quot; data-ng-model=&quot;name&quot;&gt;&lt;/p&gt;
            &lt;p data-ng-bind=&#39;name&#39;&gt;&lt;/p&gt;
            &lt;h1&gt;Hello {{name}}&lt;/h1&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h1 id="-">表达式</h1>
<p><strong>AngularJS 使用 表达式 把数据绑定到 HTML。</strong></p>
<blockquote>
<p>AngularJS 表达式写在双大括号内：{{ expression }}。</p>
<blockquote>
<p>可以实现和ng-bind同样的功能</p>
<blockquote>
<p>AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。</p>
</blockquote>
</blockquote>
</blockquote>
<h2 id="-">基本表达式</h2>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;!--


    表达式可以实现和ng-bind相同的功能

    angularjs表达式和js表达式一样,支持文本,变量和运算,对象

--&gt;

    &lt;body&gt;

        &lt;div ng-app=&quot;&quot;&gt;
            &lt;p&gt;名字 : &lt;input type=&quot;text&quot; ng-model=&quot;name&quot;&gt;&lt;/p&gt;

            &lt;!--表达式的实现--&gt;
            &lt;h1&gt;Hello {{name}}&lt;/h1&gt;

            &lt;h1&gt;Hello {{1+1}}&lt;/h1&gt;

            &lt;h1&gt;Hello {{&quot;高辉&quot;+ name}}&lt;/h1&gt;

            &lt;!--v-bind的实现--&gt;
            &lt;h1 ng-bind=&quot;&#39;hello&#39;+name&quot;&gt;&lt;/h1&gt;

            &lt;h1 ng-bind=&quot;1+1&quot;&gt;&lt;/h1&gt;

            &lt;h1 ng-bind=&quot;&#39;hello&#39;+&#39;高辉&#39;+name&quot;&gt;&lt;/h1&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h2 id="-angularjs-">表达式中angularjs对象的使用</h2>
<blockquote>
<p>和原生js中对象的访问是一样的,在{{}}中使用<strong>dian.</strong>的形式进行对象的属性的访问</p>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;!--


    使用angularjs表达式进行对象的绑定

--&gt;

    &lt;body&gt;

        &lt;div ng-app=&quot;&quot; ng-init=&quot;obj={&#39;name&#39;:&#39;gaohui&#39;,&#39;age&#39;:&#39;18&#39;}&quot;&gt;

            &lt;!--在表达式中输出对象的值--&gt;
            {{obj.name}}
            {{obj.age}}

            &lt;!--使用ng-bind的形式--&gt;
            &lt;p ng-bind=&quot;obj.name&quot;&gt;&lt;/p&gt;
            &lt;p ng-bind=&quot;obj.age&quot;&gt;&lt;/p&gt;

        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h2 id="-angularjs-">表达式中angularjs数组的使用</h2>
<blockquote>
<p>和原生js中对象的访问是一样的,在{{}}中使用<strong>dian.</strong>的形式进行对象的属性的访问</p>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;!--


    使用angularjs表达式进行对象的绑定

--&gt;

    &lt;body&gt;

        &lt;div ng-app=&quot;&quot; ng-init=&quot;obj={&#39;name&#39;:&#39;gaohui&#39;,&#39;age&#39;:&#39;18&#39;}&quot;&gt;

            &lt;!--在表达式中输出对象的值--&gt;
            {{obj.name}}
            {{obj.age}}

            &lt;!--使用ng-bind的形式--&gt;
            &lt;p ng-bind=&quot;obj.name&quot;&gt;&lt;/p&gt;
            &lt;p ng-bind=&quot;obj.age&quot;&gt;&lt;/p&gt;

        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h1 id="-">指令</h1>
<h2 id="-">基本指令</h2>
<h3 id="ng-app">ng-app</h3>
<blockquote>
<p>开启一个angularjs应用程序</p>
<blockquote>
<p>ng-app指令定义了angularjs应用程序的根元素,在网页进行加载的时候,会自动渲染页面元素</p>
<p><strong>一个页面可以包含多个运行在不同元素中的angularjs应用程序</strong></p>
</blockquote>
</blockquote>
<pre><code>
//ng-app后面可以跟一个值来连接到代码模块

&lt;div ng-app=&quot;myapp&quot; ng-controller=&#39;myController&#39;&gt;
            {{name}}
&lt;/div&gt;
</code></pre><h3 id="ng-init">ng-init</h3>
<blockquote>
<p>使用ng-init初始化数据,这个指令不是太常用,后面会学习更好的进行数据绑定的方式</p>
<blockquote>
<p>在后面的学习中,将使用控制器或者是模块代替这一部分的内容</p>
</blockquote>
</blockquote>
<h3 id="ng-model">ng-model</h3>
<blockquote>
<p>使用ng-model的形式进行数据的双向绑定</p>
<blockquote>
<p>ng-model 指令 绑定 HTML 元素 到应用程序数据。</p>
</blockquote>
</blockquote>
<pre><code>ng-model 指令也可以：

    为应用程序数据提供类型验证（number、email、required）。

    为应用程序数据提供状态（invalid、dirty、touched、error）。

    为 HTML 元素提供 CSS 类。

    绑定 HTML 元素到 HTML 表单。
</code></pre><h3 id="ng-bind">ng-bind</h3>
<blockquote>
<p>将应用程序的数据绑定到html视图中</p>
</blockquote>
<h3 id="ng-repeat">ng-repeat</h3>
<blockquote>
<p><strong>ng-repeat</strong>指令用在对象或数组上,进行循环输出</p>
<blockquote>
<p><strong>angularjs支持数据库的增删改查的操作,可以将页面上的数据想像成数据库中定义的数据</strong></p>
</blockquote>
</blockquote>
<h3 id="-angularjs-">本教程中使用的 AngularJS 指令：</h3>
<table>
<thead>
<tr>
<th style="text-align:left">指令</th>
<th style="text-align:left">描述</th>
<th style="text-align:left">讲解</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">ng_app</td>
<td style="text-align:left">定义应用程序的根元素。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-directives.html">指令</a></td>
</tr>
<tr>
<td style="text-align:left">ng_bind</td>
<td style="text-align:left">绑定 HTML 元素到应用程序数据。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-intro.html">简介</a></td>
</tr>
<tr>
<td style="text-align:left">ng_click</td>
<td style="text-align:left">定义元素被单击时的行为。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-html-events.html">HTML 事件</a></td>
</tr>
<tr>
<td style="text-align:left">ng_controller</td>
<td style="text-align:left">为应用程序定义控制器对象。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-controllers.html">控制器</a></td>
</tr>
<tr>
<td style="text-align:left">ng_disabled</td>
<td style="text-align:left">绑定应用程序数据到 HTML 的 disabled 属性。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-html-dom.html">HTML DOM</a></td>
</tr>
<tr>
<td style="text-align:left">ng_init</td>
<td style="text-align:left">为应用程序定义初始值。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-directives.html">指令</a></td>
</tr>
<tr>
<td style="text-align:left">ng_model</td>
<td style="text-align:left">绑定应用程序数据到 HTML 元素。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-directives.html">指令</a></td>
</tr>
<tr>
<td style="text-align:left">ng_repeat</td>
<td style="text-align:left">为控制器中的每个数据定义一个模板。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-directives.html">指令</a></td>
</tr>
<tr>
<td style="text-align:left">ng_show</td>
<td style="text-align:left">显示或隐藏 HTML 元素。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-html-dom.html">HTML DOM</a></td>
</tr>
</tbody>
</table>
<h1 id="-">模块</h1>
<h2 id="-">模块的基本概念</h2>
<ol>
<li>模块定义了一个应用程序</li>
<li>模块是应用程序中不同部分的容器</li>
<li>模块是应用控制器的容器</li>
<li>控制器通常属于一个模块</li>
</ol>
<h2 id="-">模块的定义</h2>
<blockquote>
<p>可以通过angular.module()函数来创建一个模块</p>
<blockquote>
<p>第一个参数对应的是执行应用程序的html元素</p>
</blockquote>
</blockquote>
<pre><code>//------------1 
&lt;div ng-app=&quot;myApp&quot;&gt;...&lt;/div&gt;

&lt;script&gt;

    var app = angular.module(&quot;myApp&quot;, []);

&lt;/script&gt;
</code></pre><p><strong>创建好模块之后,就可以在angularjs中添加控制器,过滤器,指令</strong></p>
<h2 id="-">在创建好的模块上进行控制器的添加</h2>
<pre><code>//------------2 
&lt;div ng-app=&quot;myApp&quot; ng-controller=&quot;myController&quot;&gt;...&lt;/div&gt;

&lt;script&gt;

    var app = angular.module(&quot;myApp&quot;, []);

    //添加控制器----作用域当做参数传递
    app.controller(&quot;myController&quot;,function($scope){

    })

&lt;/script&gt;
</code></pre><h1 id="scoped-">scoped-作用域</h1>
<blockquote>
<p>Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。</p>
<blockquote>
<p>Scope 是一个对象，有可用的方法和属性。</p>
<p>Scope 可应用在视图和控制器上。</p>
</blockquote>
<p>在在angularjs中创建控制器的时候,你可以将$scope对象当做一个参数来传递</p>
</blockquote>
<h2 id="-">实例演示</h2>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--4. 创建一个应用,并指定这个应用使用的控制器--&gt;
        &lt;div ng-app=&quot;myapp&quot; ng-controller=&#39;myController&#39;&gt;

            &lt;!--

                5. 在视图中使用$scope对象中添加的属性

                                                        不需要添加$scope,直接使用即可

            --&gt;
            {{name}}
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    //1. 创建一个模块
    var app = angular.module(&#39;myapp&#39;,[]);

    //2. 在模块上添加控制器,并传入作用域这个特殊参数
    app.controller(&#39;myController&#39;,function($scope){


        //3. 给$scope对象添加一个属性,在视图中能够直接使用
        $scope.name = &quot;gaohui&quot;
    })
&lt;/script&gt;
</code></pre><h2 id="-scope-">$scope概述</h2>
<p><strong>scope是angularjs的数据模型部分</strong></p>
<blockquote>
<p>　$scope是一个对象,这个对象中有属性和方法,可以直接在视图和控制器中使用</p>
<blockquote>
<p>$scope的作用域是局部的</p>
</blockquote>
</blockquote>
<h2 id="-rootscope-">$rootScope根作用域</h2>
<p><strong>所有的应用程序都有一个跟作用域,可以作用于ng-app指令包含下的所有的html元素</strong></p>
<blockquote>
<blockquote>
<p>$rootScope作用于整个应用程序,是各个controller中scope的桥梁</p>
<blockquote>
<p>使用rootScope定义的值,可以在各个控制器(controller)中使用</p>
</blockquote>
</blockquote>
</blockquote>
<pre><code>
</code></pre><h1 id="controller-">controller-控制器</h1>
<blockquote>
<p>控制angularjs应用程序的数据</p>
<blockquote>
<p>控制器是常规的js对象,由javascripe对象的构造函数创建</p>
</blockquote>
</blockquote>
<p><strong>ng-controller指令指定应用程序的所使用的制器</strong></p>
<h2 id="-">添加控制器</h2>
<blockquote>
<p>程序代码</p>
</blockquote>
<pre><code>//------------2 
&lt;div ng-app=&quot;myApp&quot; ng-controller=&quot;myController&quot;&gt;...&lt;/div&gt;

&lt;script&gt;

    var app = angular.module(&quot;myApp&quot;, []);

    //添加控制器----作用域当做参数传递
    app.controller(&quot;myController&quot;,function($scope){

    })

&lt;/script&gt;
</code></pre><blockquote>
<p>代码解析</p>
</blockquote>
<pre><code>1. ng-app 声明一个应用程序,它 的值指定 这个应用程序使用了哪个模块

2. ng-controller 定义一个控制器,表示当前应用或标签使用了哪个控制器

3. angular.module(): 使用angular的module方法创建一个模块

4. 使用模块的controller方法创建控制器

    控制器方法有两个属性
        第一个属性: 控制器的名称
        第二个属性: 一个方法,传入作用域,可以用来定义数据模型
</code></pre><h2 id="-">在控制器上添加方法以及方法的使用</h2>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;div ng-app=&quot;app&quot; ng-controller=&#39;myCtl&#39;&gt;

            &lt;!--使用$scope的属性--&gt;
            &lt;h2&gt;{{name}}&lt;/h2&gt;

            &lt;!--使用$scope的方法--&gt;
            &lt;p&gt;{{fn()}}&lt;/p&gt;

        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

    //创建一个模块
    var app = angular.module(&#39;app&#39;,[])

    //在模块上添加控制器
    app.controller(&#39;myCtl&#39;,function($scope){

        //在控制器上添加属性
        $scope.name = &quot;高辉&quot;;

        //在控制器上添加方法
        $scope.fn = function(){
            //存在的问题,这个方法为什么会执行三次
            console.log(1)
            return &quot;name&quot;+ &quot; &quot;+ $scope.name
        }

    })
&lt;/script&gt;
</code></pre><h2 id="-">外部文件中的控制器</h2>
<blockquote>
<p>直接将页面中script标签内部的代码剪切到一个js文件中,再将js文件引入即可</p>
</blockquote>
<h1 id="angularjs-">angularjs过滤器</h1>
<blockquote>
<p>　进行过滤操作</p>
<blockquote>
<p>实例: 水的过滤</p>
</blockquote>
</blockquote>
<p><strong>使用一个管道符号添加到指令或者是表达式中</strong></p>
<h2 id="angularjs-">angularjs过滤器</h2>
<blockquote>
<p>angularjs过滤器可用于进行数据的转化</p>
</blockquote>
<table>
<thead>
<tr>
<th style="text-align:left">过滤器</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">currency</td>
<td style="text-align:left">格式化数字为货币格式。</td>
</tr>
<tr>
<td style="text-align:left">filter</td>
<td style="text-align:left">从数组项中选择一个子集。</td>
</tr>
<tr>
<td style="text-align:left">lowercase</td>
<td style="text-align:left">格式化字符串为小写。</td>
</tr>
<tr>
<td style="text-align:left">orderBy</td>
<td style="text-align:left">根据某个表达式排列数组。</td>
</tr>
<tr>
<td style="text-align:left">uppercase</td>
<td style="text-align:left">格式化字符串为大写。</td>
</tr>
</tbody>
</table>
<h1 id="-">服务</h1>
<blockquote>
<p>在angularjs中,可以创建自己的服务,或者使用内置的服务</p>
</blockquote>
<h2 id="-">服务概述</h2>
<h3 id="-">什么是服务</h3>
<blockquote>
<p>服务是一个函数或者是一个对象,可以在angularjs应用程序中使用</p>
<blockquote>
<p>angularjs内置了30多个服务</p>
</blockquote>
</blockquote>
<h3 id="-">实例演示</h3>
<h4 id="-location-">$location服务</h4>
<blockquote>
<p>$location服务可以返回当前页面的url地址</p>
<blockquote>
<p>$location服务和$scope一样,是作为一个参数传递到controller中
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。</p>
</blockquote>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;!--视图  开启一个应用--&gt;

    &lt;body ng-app=&quot;app&quot; ng-controller=&quot;RegisterController&quot;&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;!--

    service:AngularJS 中你可以创建自己的服务，或使用内建服务。

    在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
    ----------AngularJS 内建了30 多个服务

    1.$location 服务，它可以返回当前页面的 URL 地址。
    --------注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

--&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    //创建模块
    var app = angular.module(&#39;app&#39;, []);

    //添加控制器
    app.controller(&#39;RegisterController&#39;, function($scope, $location) {

        console.log($location);
        console.log($location.$$absUrl);

        console.log(&quot;协议: &quot; + $location.$$protocol)
        console.log(&quot;主机: &quot; + $location.$$host)
        console.log(&quot;端口: &quot; + $location.$$port)

    })
&lt;/script&gt;
</code></pre><h4 id="-http-">$http服务</h4>
<blockquote>
<p>　$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。</p>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;!--视图  开启一个应用--&gt;

    &lt;body ng-app=&quot;app&quot; ng-controller=&quot;RegisterController&quot;&gt;
        &lt;div class=&quot;contain&quot;&gt;{{myWelcome}}&lt;/div&gt;
    &lt;/body&gt;

&lt;/html&gt;
&lt;!--

    service:AngularJS 中你可以创建自己的服务，或使用内建服务。

    在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
    ----------AngularJS 内建了30 多个服务


    2.$http 服务向服务器请求数据:
--&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    //创建模块
    var app = angular.module(&#39;app&#39;, []);

    //添加控制器
    app.controller(&#39;RegisterController&#39;, function($scope, $http) {

        $http.get(&quot;views/index.html&quot;).then(function(response) {
            $scope.myWelcome = response.data;
            console.log($scope.myWelcome)
        })

    })
&lt;/script&gt;
</code></pre><h4 id="-timeout-interval-">$timeout服务 和 $interval 服务</h4>
<blockquote>
<p>AngularJS $timeout 服务对应了 JS window.setTimeout 函数。</p>
<p>AngularJS $interval 服务对应了 JS window.setInterval 函数。</p>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;!--视图  开启一个应用--&gt;

    &lt;body ng-app=&quot;app&quot; ng-controller=&quot;RegisterController&quot;&gt;
        &lt;form&gt;
            name: &lt;input type=&quot;text&quot; ng-model=&#39;name&#39; /&gt;
            &lt;br /&gt; age : &lt;input type=&quot;text&quot; ng-model=&#39;age&#39; /&gt;
            &lt;br /&gt; sex : &lt;input type=&quot;text&quot; ng-model=&#39;sex&#39; /&gt;
            &lt;br /&gt;
            &lt;input type=&quot;submit&quot; value=&quot;提交&quot; /&gt;
        &lt;/form&gt;
        &lt;p ng-controller=&quot;timeController&quot;&gt;{{time}}&lt;/p&gt;
    &lt;/body&gt;

&lt;/html&gt;
&lt;!--

    service:AngularJS 中你可以创建自己的服务，或使用内建服务。

    在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
    ----------AngularJS 内建了30 多个服务


    3.$timeout对应js的setTimeout(function(){},1000)
    ----interval
--&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    //创建模块
    var app = angular.module(&#39;app&#39;, []);

    //添加控制器
    app.controller(&#39;RegisterController&#39;, function($scope, $timeout) {
        //添加模型数据
        $scope.name = &quot;gaohui&quot;;
        $scope.age = &quot;18&quot;;
        $scope.sex = &quot;male&quot;;

        //设置定时器
        $timeout(function(){
            $scope.name = &quot;高辉&quot;;
        },1000);

    })

    //设置计时器
    app.controller(&#39;timeController&#39;,function($scope,$interval){
        $scope.time = new Date().toLocaleTimeString();
        $interval(function(){
            $scope.time = new Date().toLocaleTimeString();
        },1000)

    })
&lt;/script&gt;
</code></pre><h4 id="-">自定义服务</h4>
<blockquote>
<p>以下面的代码为例</p>
</blockquote>
<pre><code>    //1 创建一个模块
    var app = angular.module(&#39;app&#39;,[])


    //2. 在这里创建一个自定义的服务,添加到控制器
    app.service(&#39;$uc&#39;,function(){
        this.toUC = function(data){
            return data.toUpperCase()
        }
    })

    //3. 给模块添加控制器   并使用  自定义的服务
    app.controller(&#39;controller&#39;,function($scope,$uc){
        $scope.name=$uc.toUC(&quot;gaohui&quot;)
    })
</code></pre><blockquote>
<p>代码解析</p>
</blockquote>
<pre><code>在第二步实现中,使用模块app的service方法创建一个自定义的服务

    第一个参数是服务的名称,第二个参数是一个韩式,定义这个服务要完成的一些操作
</code></pre><h5 id="-">实例一: 在控制器中使用自定义服务</h5>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;script src=&quot;http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;div ng-app=&quot;myApp&quot; ng-controller=&quot;myCtrl&quot;&gt;

            &lt;p&gt;255 的16进制是:&lt;/p&gt;

            &lt;h1&gt;{{hex}}&lt;/h1&gt;

        &lt;/div&gt;

        &lt;p&gt;自定义服务，用于转换16进制数：&lt;/p&gt;

        &lt;script&gt;
            //1. 创建模块
            var app = angular.module(&#39;myApp&#39;, []);

            //2. 创建一个自定义的服务  hexafy
            app.service(&#39;hexafy&#39;, function() {
                this.myFunc = function(x) {
                    return x.toString(16);
                }
            });
            //3. 添加控制器,应用创建的服务
            app.controller(&#39;myCtrl&#39;, function($scope, hexafy) {
                $scope.hex = hexafy.myFunc(255);
            });
        &lt;/script&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h5 id="-">实例二: 在过滤器中使用自定义的服务</h5>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            var app = angular.module(&#39;app&#39;, []);

            // 在模块的基础上,添加自定义的服务
            app.service(&quot;$convert&quot;, function() {
                //convert是服务的名称,后面是服务的方法声明
                this.fn = function(data) {
                    return data.toString(16);
                }
            })

            // 在模块的基础上添加自定义的过滤器
            app.filter(&#39;myFormat&#39;, [&#39;$convert&#39;, function($convert) {
                return function(data) {
                    return $convert.fn(data);
                };
            }]);

            // 添加控制器,使用自定义的服务
            app.controller(&quot;myController&quot;, [&quot;$scope&quot;, &quot;$convert&quot;, function($scope, $convert) {
                $scope.counts = [255, 251, 200];
            }])
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;div ng-app=&quot;app&quot; ng-controller=&quot;myController&quot;&gt;
            &lt;p&gt;在获取数组 [255, 251, 200] 值时使用过滤器:&lt;/p&gt;
            &lt;ul&gt;
                &lt;li ng-repeat=&quot;x in counts&quot;&gt;result: {{x | myFormat}}&lt;/li&gt;
            &lt;/ul&gt;
            &lt;p&gt;过滤器使用服务将10进制转换为16进制。&lt;/p&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h1 id="angularjs-http">AngularJS Http</h1>
<blockquote>
<p>是AngularJS 的  XMLHttpRequest,类似于原生js的 ajax 对象
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。</p>
</blockquote>
<h2 id="-">实例</h2>
<h3 id="-http-get-url-then-function-res-">$http.get(url).then(function(res){})</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
        &lt;style type=&quot;text/css&quot;&gt;

            table{
                border-collapse: collapse;
            }
            th,td{
                padding: 5px 20px;
            }

            img{
                width: 100px;
                height: 100px;
            }

        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;div ng-app=&quot;app&quot; ng-controller=&#39;myController&#39;&gt;


            &lt;!--将请求回来的数据渲染在一个表格中--&gt;
            &lt;table border=&quot;1&quot;&gt;

                &lt;tr&gt;
                    &lt;th&gt;name&lt;/th&gt;
                    &lt;th&gt;age&lt;/th&gt;
                    &lt;th&gt;img&lt;/th&gt;
                &lt;/tr&gt;
                &lt;tr ng-repeat=&quot;data in arr&quot;&gt;
                    &lt;td&gt;{{data.name}}&lt;/td&gt;
                    &lt;td&gt;{{data.age}}&lt;/td&gt;
                    &lt;td&gt;&lt;img src=&quot;{{data.imgSrc}}&quot; alt=&quot;&quot; /&gt;&lt;/td&gt;
                &lt;/tr&gt;


            &lt;/table&gt;

        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

    var app = angular.module(&#39;app&#39;,[])

    app.controller(&#39;myController&#39;,function($scope,$http){

        //使用$http服务发送请求,获取数据
        var url = &#39;json/my.json&#39;
        $http.get(url).then(function(res){
            console.log(res.data)

            //将请求回来的数据保存在数据模型中
            $scope.arr = res.data
        })
    })

&lt;/script&gt;;
</code></pre><h3 id="-http-get-url-success-function-res-">$http.get(url).success(function(res){})</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;script src=&quot;//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;div ng-app=&quot;myApp&quot; ng-controller=&quot;customersCtrl&quot;&gt;

            &lt;ul&gt;
                &lt;li ng-repeat=&quot;data in arr&quot;&gt;
                    {{ data.name }}
                &lt;/li&gt;
            &lt;/ul&gt;

        &lt;/div&gt;

        &lt;script&gt;
            var app = angular.module(&#39;myApp&#39;, []);

            app.controller(&#39;customersCtrl&#39;, function($scope, $http) {

                var url = &#39;json/my.json&#39;
                //发送请求,请求成功后获取数据,通过函数的参数来接受获取的数据
                $http.get(url).success(function(res) {
                        console.log(res)
                        $scope.arr = res;
                    });
            });
        &lt;/script&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h1 id="-">选择框和表格</h1>
<h2 id="-">选择框</h2>
<blockquote>
<p>也叫下拉列表</p>
<blockquote>
<p>AngularJS 可以使用数组或对象创建一个下拉列表选项。</p>
</blockquote>
</blockquote>
<p><strong>使用 ng-options 创建选择框</strong></p>
<blockquote>
<p>列表项通过对象和数组循环输出</p>
</blockquote>
<h3 id="-ng-options-">使用ng-options创建一个下拉列表</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;div ng-app=&quot;app&quot; ng-controller=&quot;myController&quot;&gt;

            &lt;!--创建一个下拉列表--&gt;
            &lt;select ng-model=&quot;selectedName&quot; ng-options=&quot;data for data in arr&quot;&gt;

            &lt;/select&gt;

        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

    //1 创建一个模块
    var app = angular.module(&#39;app&#39;,[])

    //2 在模块上添加控制器
    app.controller(&#39;myController&#39;,function($scope){
        $scope.arr = [1,2,3]
    })
    /
&lt;/script&gt;
</code></pre><h3 id="-ng-repeat-">使用ng-repeat创建下拉列表</h3>
<pre><code>
</code></pre><h3 id="ng-options-">ng-options更强大</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--开启一个angularjs应用程序--&gt;
        &lt;div ng-app=&quot;app&quot; ng-controller=&quot;myCtl&quot;&gt;
            &lt;select name=&quot;&quot;&gt;
                &lt;option ng-repeat=&quot;data in arr&quot;&gt;{{data}}&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    //创建一个模块
    var app =angular.module(&#39;app&#39;,[])

    //在创建好的模块上添加控制器
    app.controller(&#39;myCtl&#39;,function($scope){
        //数据模型
        $scope.arr = [1,2,3]
    })
&lt;/script&gt;
</code></pre><h2 id="-">表格</h2>
<blockquote>
<p>ng-repeat 指令可以完美的显示表格。</p>
</blockquote>
<h3 id="-">基本表格操作</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
        &lt;style&gt;
            table,
            th,
            td {
                border: 1px solid grey;
                border-collapse: collapse;
                padding: 5px;
            }

            table tr:nth-child(odd) {
                background-color: #f1f1f1;
            }

            table tr:nth-child(even) {
                background-color: #ffffff;
            }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;!--创建一个angular应用程序--&gt;
        &lt;div ng-app=&quot;app&quot; ng-controller=&quot;myCtl&quot;&gt;
            &lt;table border=&quot;1&quot;&gt;

                &lt;tr&gt;
                    &lt;th&gt;en&lt;/th&gt;
                    &lt;th&gt;name&lt;/th&gt;
                    &lt;th&gt;age&lt;/th&gt;
                &lt;/tr&gt;

                &lt;!--使用ng-repeat进行表格数据的渲染--&gt;
                &lt;tr ng-repeat=&quot;data in stu&quot;&gt;
                    &lt;td&gt;{{data.en}}&lt;/td&gt;
                    &lt;td&gt;{{data.name}}&lt;/td&gt;
                    &lt;td&gt;{{data.age}}&lt;/td&gt;
                &lt;/tr&gt;

            &lt;/table&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    //1. 创建一个模块
    var app = angular.module(&#39;app&#39;, [])

    //2. 在模块上添加控制器
    app.controller(&#39;myCtl&#39;, function($scope) {
        $scope.stu = [

            {
                &quot;en&quot;: &quot;gaohui&quot;,
                &quot;name&quot;: &quot;高辉&quot;,
                &quot;age&quot;: &quot;23&quot;
            }, {
                &quot;en&quot;: &quot;angda&quot;,
                &quot;name&quot;: &quot;昂达&quot;,
                &quot;age&quot;: &quot;22&quot;
            }, {
                &quot;en&quot;: &quot;guofeng&quot;,
                &quot;name&quot;: &quot;国锋&quot;,
                &quot;age&quot;: &quot;23&quot;
            }, {
                &quot;en&quot;: &quot;liujina&quot;,
                &quot;name&quot;: &quot;刘健&quot;,
                &quot;age&quot;: &quot;23&quot;
            }
        ]
    })
&lt;/script&gt;
</code></pre><h3 id="-">表格的排序</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
        &lt;style&gt;
            table,
            th,
            td {
                border: 1px solid grey;
                border-collapse: collapse;
                padding: 5px;
            }

            table tr:nth-child(odd) {
                background-color: #f1f1f1;
            }

            table tr:nth-child(even) {
                background-color: #ffffff;
            }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;!--创建一个angular应用程序--&gt;
        &lt;div ng-app=&quot;app&quot; ng-controller=&quot;myCtl&quot;&gt;
            &lt;table border=&quot;1&quot;&gt;

                &lt;tr&gt;
                    &lt;th&gt;en&lt;/th&gt;
                    &lt;th&gt;name&lt;/th&gt;
                    &lt;th&gt;age&lt;/th&gt;
                &lt;/tr&gt;

                &lt;!--表格的排序显示--&gt;
                &lt;tr ng-repeat=&quot;data in stu | orderBy:&#39;en&#39;&quot;&gt;
                    &lt;td&gt;{{data.en}}&lt;/td&gt;
                    &lt;td&gt;{{data.name}}&lt;/td&gt;
                    &lt;td&gt;{{data.age}}&lt;/td&gt;
                &lt;/tr&gt;

            &lt;/table&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    //1. 创建一个模块
    var app = angular.module(&#39;app&#39;, [])

    //2. 在模块上添加控制器
    app.controller(&#39;myCtl&#39;, function($scope) {
        $scope.stu = [

            {
                &quot;en&quot;: &quot;gaohui&quot;,
                &quot;name&quot;: &quot;高辉&quot;,
                &quot;age&quot;: &quot;23&quot;
            }, {
                &quot;en&quot;: &quot;angda&quot;,
                &quot;name&quot;: &quot;昂达&quot;,
                &quot;age&quot;: &quot;22&quot;
            }, {
                &quot;en&quot;: &quot;guofeng&quot;,
                &quot;name&quot;: &quot;国锋&quot;,
                &quot;age&quot;: &quot;23&quot;
            }, {
                &quot;en&quot;: &quot;liujina&quot;,
                &quot;name&quot;: &quot;刘健&quot;,
                &quot;age&quot;: &quot;23&quot;
            }
        ]
    })
&lt;/script&gt;
</code></pre><h3 id="-">对表格单元格数据使用过滤器</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
        &lt;style&gt;
            table,
            th,
            td {
                border: 1px solid grey;
                border-collapse: collapse;
                padding: 5px;
            }

            table tr:nth-child(odd) {
                background-color: #f1f1f1;
            }

            table tr:nth-child(even) {
                background-color: #ffffff;
            }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;!--创建一个angular应用程序--&gt;
        &lt;div ng-app=&quot;app&quot; ng-controller=&quot;myCtl&quot;&gt;
            &lt;table border=&quot;1&quot;&gt;

                &lt;tr&gt;
                    &lt;th&gt;en&lt;/th&gt;
                    &lt;th&gt;name&lt;/th&gt;
                    &lt;th&gt;age&lt;/th&gt;
                &lt;/tr&gt;

                &lt;tr ng-repeat=&quot;data in stu&quot;&gt;
                    &lt;!--表格数据的过滤显示--&gt;
                    &lt;td&gt;{{data.en | uppercase}}&lt;/td&gt;
                    &lt;td&gt;{{data.name}}&lt;/td&gt;
                    &lt;td&gt;{{data.age}}&lt;/td&gt;
                &lt;/tr&gt;

            &lt;/table&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    //1. 创建一个模块
    var app = angular.module(&#39;app&#39;, [])

    //2. 在模块上添加控制器
    app.controller(&#39;myCtl&#39;, function($scope) {
        $scope.stu = [

            {
                &quot;en&quot;: &quot;gaohui&quot;,
                &quot;name&quot;: &quot;高辉&quot;,
                &quot;age&quot;: &quot;23&quot;
            }, {
                &quot;en&quot;: &quot;angda&quot;,
                &quot;name&quot;: &quot;昂达&quot;,
                &quot;age&quot;: &quot;22&quot;
            }, {
                &quot;en&quot;: &quot;guofeng&quot;,
                &quot;name&quot;: &quot;国锋&quot;,
                &quot;age&quot;: &quot;23&quot;
            }, {
                &quot;en&quot;: &quot;liujina&quot;,
                &quot;name&quot;: &quot;刘健&quot;,
                &quot;age&quot;: &quot;23&quot;
            }
        ]
    })
&lt;/script&gt;
</code></pre><h1 id="angularjs-dom">angularjs  DOM</h1>
<blockquote>
<p>angularjs有自己的html属性指令</p>
</blockquote>
<h2 id="ng-disabled">ng-disabled</h2>
<p><strong>ng-disabled绑定应用程序数据到html的disabled属性</strong></p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--启动一个angularjs应用程序--&gt;
        &lt;div ng-app=&quot;&quot;&gt;

            &lt;!--ng-disabled指令绑定应用应用程序数据到html元素的disabled指令--&gt;
            &lt;button ng-disabled=&quot;bool&quot;&gt;按钮&lt;/button&gt;


            &lt;!-- ng-model绑定应用程序数据bool到input标签的value值 --&gt;
            &lt;input type=&quot;checkbox&quot; ng-model=&#39;bool&#39; name=&quot;&quot; id=&quot;&quot;  /&gt;

        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h2 id="ng-show">ng-show</h2>
<blockquote>
<p>ng-show指令进行元素的显示和隐藏,其值可以是bool值,也可以是一个bool表达式</p>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--启动一个angularjs应用程序--&gt;
        &lt;div ng-app&gt;

            &lt;!--

                ng-show指令进行元素的显示和隐藏

                                                    其值可以是一个bool表达式

            --&gt;
            &lt;p ng-show=&#39;true&#39;&gt;元素显示&lt;/p&gt;
            &lt;p ng-show=&#39;false&#39;&gt;元素隐藏&lt;/p&gt;

        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h2 id="ng-hide">ng-hide</h2>
<blockquote>
</blockquote>
<h1 id="angularjs-dom">angularjs  DOM</h1>
<blockquote>
<p>angularjs有自己的html属性指令</p>
</blockquote>
<h2 id="ng-disabled">ng-disabled</h2>
<p><strong>ng-disabled绑定应用程序数据到html的disabled属性</strong></p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--启动一个angularjs应用程序--&gt;
        &lt;div ng-app=&quot;&quot;&gt;

            &lt;!--ng-disabled指令绑定应用应用程序数据到html元素的disabled指令--&gt;
            &lt;button ng-disabled=&quot;bool&quot;&gt;按钮&lt;/button&gt;


            &lt;!-- ng-model绑定应用程序数据bool到input标签的value值 --&gt;
            &lt;input type=&quot;checkbox&quot; ng-model=&#39;bool&#39; name=&quot;&quot; id=&quot;&quot;  /&gt;

        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h2 id="ng-show">ng-show</h2>
<blockquote>
<p>ng-show指令进行元素的显示和隐藏,其值可以是bool值,也可以是一个bool表达式</p>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--启动一个angularjs应用程序--&gt;
        &lt;div ng-app&gt;

            &lt;!--

                ng-show指令进行元素的显示和隐藏

                                                    其值可以是一个bool表达式

            --&gt;
            &lt;p ng-show=&#39;true&#39;&gt;元素显示&lt;/p&gt;
            &lt;p ng-show=&#39;false&#39;&gt;元素隐藏&lt;/p&gt;

        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h2 id="ng-hide">ng-hide</h2>
<blockquote>
</blockquote>
<h1 id="-">事件</h1>
<blockquote>
<p>ng-click制定了angular应用程序的单机事件</p>
</blockquote>
<h2 id="-">简单实例</h2>
<h3 id="-1">实例1</h3>
<blockquote>
<p>点击按钮,进行数字加1的操作</p>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;!--ng-app开启一个angularjs应用程序   使用app这个模块  并添加控制器--&gt;

        &lt;div ng-app=&quot;app&quot; ng-controller=&#39;myCtl&#39;&gt;
            &lt;button ng-click=&quot;num=num+1&quot;&gt;点击加1&lt;/button&gt;
            &lt;p&gt;{{num}}&lt;/p&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

    //创建一个模块
    var  app = angular.module(&#39;app&#39;,[])

    //在模块上添加控制器,   并传入作用域参数
    app.controller(&#39;myCtl&#39;,function($scope){
        $scope.num=0;

        console.log($scope.num)
    })


&lt;/script&gt;
</code></pre><h3 id="-2">实例2</h3>
<blockquote>
<p>点击按钮,进行元素的显示和隐藏操作</p>
<blockquote>
<p>以下操作可以通过简单改写,以点击按钮,执行函数的形式实现</p>
</blockquote>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;!--ng-app开启一个angularjs应用程序   使用app这个模块  并添加控制器--&gt;

        &lt;div ng-app=&quot;app&quot; ng-controller=&#39;myCtl&#39;&gt;
            &lt;button ng-click=&quot;bool = !bool&quot;&gt;点击按钮进行元素的显示和隐藏切换&lt;/button&gt;
            &lt;p&gt;{{bool}}&lt;/p&gt;

            &lt;!--下面是进行显示额隐藏切换的元素--&gt;
            &lt;ul ng-show=&#39;bool&#39;&gt;
                &lt;li&gt;1&lt;/li&gt;
                &lt;li&gt;2&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    //创建一个模块
    var app = angular.module(&#39;app&#39;, [])

    //在模块上添加控制器,   并传入作用域参数
    app.controller(&#39;myCtl&#39;, function($scope) {

        $scope.bool = true;

    })
&lt;/script&gt;
</code></pre><h1 id="-">表单和输入验证</h1>
<h2 id="-">表单</h2>
<blockquote>
<p>angularjs表单是输入控件的集合</p>
<blockquote>
<p>html表单  通常与 html控件同时存在</p>
</blockquote>
<p>HTML 控件,以下 HTML input 元素被称为 HTML 控件:</p>
<blockquote>
<ol>
<li>input 元素</li>
<li>select 元素</li>
<li>button 元素</li>
<li>textarea 元素</li>
</ol>
</blockquote>
</blockquote>
<h3 id="-">基本表单实例</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--开启一个angularjs应用程序   使用模块   添加控制器--&gt;
        &lt;div ng-app=&quot;app&quot; ng-controller=&quot;myCtl&quot;&gt;
            &lt;form action=&quot;javascript:void(0)&quot; method=&quot;post&quot;&gt;

                &lt;!--使用数据模型里面的数据--&gt;
                name:&lt;input type=&quot;text&quot; ng-model=&quot;person.name&quot; /&gt; &lt;br /&gt;
                age:&lt;input type=&quot;text&quot; ng-model=&quot;person.age&quot; /&gt;

                &lt;br /&gt;
                &lt;input type=&quot;submit&quot; value=&quot;submit&quot; /&gt;

            &lt;/form&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    //创建一个模块
    var app = angular.module(&#39;app&#39;, [])

    //在模块上添加控制器,并传入作用域参数
    app.controller(&#39;myCtl&#39;, function($scope) {

        $scope.person = {
            &quot;name&quot;: &quot;gaohui&quot;,
            &quot;age&quot;: &quot;23&quot;
        }

    })
&lt;/script&gt;
</code></pre><h3 id="-">表单使用提升</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;div ng-app=&quot;myApp&quot; ng-controller=&quot;formCtrl&quot;&gt;
            &lt;form novalidate&gt;
                &lt;p&gt;First Name:&lt;/p&gt;
                &lt;input type=&quot;text&quot; ng-model=&quot;user.firstName&quot;&gt;
                &lt;p&gt;Last Name:&lt;/p&gt;
                &lt;input type=&quot;text&quot; ng-model=&quot;user.lastName&quot;&gt;
                &lt;div&gt;
                    &lt;button ng-click=&quot;reset()&quot;&gt;RESET&lt;/button&gt;
                &lt;/div&gt;

            &lt;/form&gt;
            &lt;p&gt;form = {{user }}&lt;/p&gt;
            &lt;p&gt;master = {{master}}&lt;/p&gt;
        &lt;/div&gt;

        &lt;script&gt;
            var app = angular.module(&#39;myApp&#39;, []);
            app.controller(&#39;formCtrl&#39;, function($scope) {
                $scope.master = {
                    firstName: &quot;John&quot;,
                    lastName: &quot;Doe&quot;
                };
                $scope.reset = function() {

                    //angular.copy()方法实现数据的拷贝
                    $scope.user = angular.copy($scope.master);
                };

                //默认先执行一次方法
                $scope.reset();
            });
        &lt;/script&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h2 id="-">输入验证</h2>
<blockquote>
<p>AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。</p>
<blockquote>
<p>HTML 属性 novalidate 用于禁用浏览器的默认验证。
客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。</p>
</blockquote>
</blockquote>
<h3 id="-">表单输入验证例子</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;script src=&quot;http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;h2&gt;验证实例&lt;/h2&gt;

        &lt;form ng-app=&quot;myApp&quot; ng-controller=&quot;validateCtrl&quot; name=&quot;myForm&quot; novalidate&gt;

            &lt;p&gt;用户名:&lt;br&gt;
                &lt;input type=&quot;text&quot; name=&quot;user&quot; ng-model=&quot;user&quot; required&gt;
                &lt;span style=&quot;color:red&quot; ng-show=&quot;myForm.user.$dirty &amp;&amp; myForm.user.$invalid&quot;&gt;
                &lt;span ng-show=&quot;myForm.user.$error.required&quot;&gt;用户名是必须的。&lt;/span&gt;
                &lt;/span&gt;
            &lt;/p&gt;

            &lt;p&gt;邮箱:&lt;br&gt;
                &lt;input type=&quot;email&quot; name=&quot;email&quot; ng-model=&quot;email&quot; required&gt;
                &lt;span style=&quot;color:red&quot; ng-show=&quot;myForm.email.$dirty &amp;&amp; myForm.email.$invalid&quot;&gt;
                &lt;span ng-show=&quot;myForm.email.$error.required&quot;&gt;邮箱是必须的。&lt;/span&gt;
                &lt;span ng-show=&quot;myForm.email.$error.email&quot;&gt;非法的邮箱地址。&lt;/span&gt;
                &lt;/span&gt;
            &lt;/p&gt;

            &lt;p&gt;
                &lt;input type=&quot;submit&quot; ng-disabled=&quot;myForm.user.$dirty &amp;&amp; myForm.user.$invalid ||  
                myForm.email.$dirty &amp;&amp; myForm.email.$invalid&quot;&gt;
            &lt;/p&gt;

        &lt;/form&gt;

        &lt;script&gt;
            var app = angular.module(&#39;myApp&#39;, []);

            app.controller(&#39;validateCtrl&#39;, function($scope) {
                $scope.user = &#39;Loen Wang&#39;;
                $scope.email = &#39;loenwang@loen.wang&#39;;
            });
        &lt;/script&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h1 id="-api">全局api</h1>
<blockquote>
<p>　API 意为 Application Programming Interface（应用程序编程接口）。
　</p>
<blockquote>
<p>全局api使用angular这个对象进行访问</p>
</blockquote>
</blockquote>
<p><strong>四种基本的api以及其使用的方式</strong></p>
<pre><code>angular.lowercase() 转换字符串为小写

angular.uppercase() 转换字符串为大写

angular.isString()  判断给定的对象是否为字符串，如果是返回 true。

angular.isNumber()  判断给定的对象是否为数字，如果是返回 true。
</code></pre><h2 id="-">一个完整的例子</h2>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;

    &lt;/head&gt;

    &lt;body ng-app=&quot;app&quot; ng-controller=&quot;myController&quot;&gt;
        &lt;h1&gt;name: {{ userName1 }}&lt;/h1&gt;
        &lt;h1&gt;sex : {{ userSex1 }}&lt;/h1&gt;
        &lt;h1&gt;isString : {{ isString }}&lt;/h1&gt;
        &lt;h1&gt;isNumber : {{ isNumber }}&lt;/h1&gt;
    &lt;/body&gt;

&lt;/html&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    //1. 创建模块
    var app = angular.module(&quot;app&quot;, []);

    //2. 添加控制器
    app.controller(&quot;myController&quot;, [&quot;$scope&quot;, function($scope) {
        $scope.userName = &quot;gaohui&quot;;
        $scope.userSex = &quot;GENDER&quot;;

        $scope.userName1 = angular.uppercase($scope.userName);
        $scope.isString = angular.isString($scope.userName);

        $scope.userSex1 = angular.lowercase($scope.userSex);
        $scope.isNumber = angular.isNumber($scope.userSex);

    }])
&lt;/script&gt;
</code></pre><h1 id="angularjs-bootstrap">angularjs bootstrap</h1>
<h2 id="bootstrap-">bootstrap概述</h2>
<blockquote>
<p>AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。</p>
</blockquote>
<h2 id="bootstrap-">bootstrap使用</h2>
<blockquote>
<p>引入bootstrap样式之后,就可以使用样式表里面已经定义好的样式了</p>
</blockquote>
<ol>
<li>你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:</li>
</ol>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;&gt;
</code></pre><ol>
<li>如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：</li>
</ol>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css&quot;&gt;
</code></pre><h1 id="-">页面包含</h1>
<p><strong>ng-include:这个指令可以实现页面的包含操作</strong></p>
<blockquote>
<p>实现的是在一个页面中使用多页页面里面的内容</p>
<blockquote>
<p>存在的小问题: 在一个页面添加样式,会作用于所有页面里面的内容</p>
</blockquote>
</blockquote>
<pre><code>        &lt;!--开启一个应用,使用页面包含--&gt;
        &lt;div ng-app&gt;

            &lt;div ng-include=&quot;&#39;./01-head.html&#39;&quot;&gt;&lt;/div&gt;
            &lt;div ng-include=&quot;&#39;./02-body.html&#39;&quot;&gt;&lt;/div&gt;
            &lt;div ng-include=&quot;&#39;./03-foot.html&#39;&quot;&gt;&lt;/div&gt;

        &lt;/div&gt;
</code></pre><h1 id="angularjs-">angularjs动画</h1>
<blockquote>
<p>angularjs提供了动画效果,可以配合css使用</p>
<blockquote>
<p>AngularJS 使用动画需要引入 angular-animate.min.js 库。</p>
</blockquote>
</blockquote>
<h2 id="-">动画库的使用</h2>
<p><strong>1. angularjs动画的引入</strong></p>
<pre><code>&lt;script src=&quot;http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js&quot;&gt;&lt;/script&gt;
</code></pre><p><strong>2. 在应用中使用模型 ngAnimate</strong></p>
<pre><code>&lt;body ng-app=&quot;ngAnimate&quot;&gt;
</code></pre><h2 id="-">动画的实现</h2>
<blockquote>
<p>通过样式类的操作实现</p>
</blockquote>
<pre><code>ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:
    ng-show
    ng-hide
    ng-class
    ng-view
    ng-include
    ng-repeat
    ng-if
    ng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
此外， 在动画完成后，HTML 元素的类集合将被移除。例如：ng-hide 指令会添加一下类：
    ng-animate
    ng-hide-animate
    ng-hide-add (如果元素将被隐藏)
    ng-hide-remove (如果元素将显示)
    ng-hide-add-active (如果元素将隐藏)
    ng-hide-remove-active (如果元素将显示)
</code></pre><h2 id="-">过渡例子</h2>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;style&gt;
            div {
                transition: all linear 0.5s;
                background-color: lightblue;
                height: 100px;
            }

            .ng-hide {
                height: 0;
            }
        &lt;/style&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;&gt;
        &lt;script src=&quot;http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body ng-app=&quot;myApp&quot;&gt;

        &lt;h1&gt;隐藏 DIV: &lt;input type=&quot;checkbox&quot; ng-model=&quot;myCheck&quot;&gt;&lt;/h1&gt;

        &lt;div ng-hide=&quot;myCheck&quot;&gt;&lt;/div&gt;

        &lt;script&gt;
            var app = angular.module(&#39;myApp&#39;, [&#39;ngAnimate&#39;]);
        &lt;/script&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h2 id="-">动画例子</h2>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;&gt;
        &lt;script src=&quot;http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js&quot;&gt;&lt;/script&gt;
        &lt;style&gt;
            @keyframes myChange {
                from {
                    height: 100px;
                }
                to {
                    height: 0;
                }
            }

            div {
                height: 100px;
                background-color: lightblue;
            }

            div.ng-hide {
                animation: 0.5s myChange;
            }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body ng-app=&quot;ngAnimate&quot;&gt;

        隐藏 DIV: &lt;input type=&quot;checkbox&quot; ng-model=&quot;myCheck&quot;&gt;

        &lt;div ng-hide=&quot;myCheck&quot;&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre><h1 id="-">依赖注入</h1>
<blockquote>
</blockquote>
<h1 id="ng-">ng路由</h1>
<blockquote>
<p>路由允许我们使用不同的  url  访问 不同的内容</p>
<blockquote>
<p>通过路由操作可以实现单页面应用</p>
</blockquote>
</blockquote>
<h2 id="-">路由的配置</h2>
<h3 id="-">配置路由的一般流程</h3>
<ol>
<li>引入实现路由的 js 文件：angular-route.js。</li>
</ol>
<pre><code>&lt;script src=&quot;http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js&quot;&gt;&lt;/script&gt;
</code></pre><ol>
<li>创建一个模块并注入ngRoute(路由)依赖</li>
</ol>
<pre><code>var app = angular.module(&#39;app&#39;,[&#39;ngRoute&#39;])
</code></pre><ol>
<li>进行路由的配置</li>
</ol>
<pre><code>app.config([&#39;$routeProvider&#39;, function($routeProvider) {
        $routeProvider
            .when(&#39;/&#39;, {
                template: &#39;&lt;h1&gt;home&lt;/h1&gt;&#39;
            })
            .when(&#39;/about&#39;, {
                template: &#39;&lt;h1&gt;about&lt;/h1&gt;&#39;
            })
            .when(&#39;/login&#39;, {
                template: &#39;&lt;h1&gt;login&lt;/h1&gt;&#39;
            })
            .otherwise({
                template: &#39;&lt;h1&gt;404&lt;/h1&gt;&#39;
            })
    }])
</code></pre><blockquote>
<p>简单解析</p>
<blockquote>
<p>angularjs模块的config函数用于进行路由的配置</p>
<blockquote>
<pre><code> *  ----通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数
 *  ----并且使用$routeProvider.whenAPI来定义我们的路由规则。
 *  
</code></pre><p>$routeProvider 为我们提供了 when(path,object) &amp; otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。</p>
</blockquote>
</blockquote>
</blockquote>
<ol>
<li>在页面上定义路由跳转的链接,也就是  a  链接</li>
</ol>
<pre><code>            &lt;div class=&quot;router&quot;&gt;
                &lt;a href=&quot;#/&quot;&gt;home&lt;/a&gt;
                &lt;a href=&quot;#/about&quot;&gt;about&lt;/a&gt;
                &lt;a href=&quot;#/login&quot;&gt;login&lt;/a&gt;
                &lt;a href=&quot;#/404&quot;&gt;404&lt;/a&gt;
            &lt;/div&gt;
</code></pre><ol>
<li>路由对应内容的显示</li>
</ol>
<pre><code>&lt;div ng-view id=&quot;view&quot;&gt;&lt;/div&gt;
</code></pre><h3 id="-">完整的实例</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;angular 1&lt;/title&gt;
        &lt;!--1. cdn  实现js的引入--&gt;
        &lt;script src=&quot;https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js&quot;&gt;&lt;/script&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;&gt;
        &lt;script src=&quot;http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js&quot;&gt;&lt;/script&gt;

        &lt;style type=&quot;text/css&quot;&gt;
            #view {
                width: 500px;
                margin: 0 auto;
                border: 1px solid red;
                height: 300px;
                background: pink;
            }
            .router{
                width: 500px;
                margin: 0 auto;
                border: 1px solid red;
                border-bottom: 0;
            }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!--开启一个angular应用程序,使用app这个模块--&gt;
        &lt;div ng-app=&quot;app&quot;&gt;

            &lt;!--定义路由--&gt;
            &lt;div class=&quot;router&quot;&gt;
                &lt;a href=&quot;#/&quot;&gt;home&lt;/a&gt;
                &lt;a href=&quot;#/about&quot;&gt;about&lt;/a&gt;
                &lt;a href=&quot;#/login&quot;&gt;login&lt;/a&gt;
                &lt;a href=&quot;#/404&quot;&gt;404&lt;/a&gt;
            &lt;/div&gt;
            &lt;!--路由对应的内容的显示--&gt;
            &lt;div ng-view id=&quot;view&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    //2. 创建一个模块  并注入ngRouter(路由)依赖
    var app = angular.module(&#39;app&#39;, [&#39;ngRoute&#39;]);

    /*
     *
     * 3. 进行路由的配置,使用模块的config方法
     *  ---AngularJS 模块的 config 函数用于配置路由规则。
     *  ----通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数
     *  ----并且使用$routeProvider.whenAPI来定义我们的路由规则。
     * 
     * 
     * */
    app.config([&#39;$routeProvider&#39;, function($routeProvider) {
        $routeProvider
            .when(&quot;/&quot;, {
                //template:在ng-view中简单的插入html内容
                template: &quot;&lt;h1&gt;Home&lt;/h1&gt;&quot;
            })
            .when(&quot;/login&quot;, {
                template: &quot;&lt;h1&gt;Login&lt;/h1&gt;&quot;
            })
            .when(&quot;/about&quot;, {
                template: &quot;&lt;h1&gt;about&lt;/h1&gt;&quot;
            })
            .otherwise({
                template: &quot;&lt;h1&gt;404 Not Found&lt;/h1&gt;&quot;
            })
    }])
&lt;/script&gt;
</code></pre><h2 id="-">路由配置对象</h2>
<blockquote>
<p>总结上节的内容,可以总结出以下几点</p>
<blockquote>
<ol>
<li><p>我们创建一个模块,在模块中注入ngRoute依赖,通过模块的config方法配置路由</p>
</li>
<li><p>在路由配置的时候,我们需要把$routeProvider注入到我们的配置函数</p>
</li>
<li><p>$routeProvider 为我们提供了 when(path,object) &amp; otherwise(object) 
函数按顺序定义所有路由，函数包含两个参数:</p>
<blockquote>
<p>第一个参数是 URL 或者 URL 正则规则。</p>
<p><strong>第二个参数是路由配置对象。</strong></p>
</blockquote>
</li>
</ol>
</blockquote>
</blockquote>
<h3 id="-">路由配置对象</h3>
<pre><code>
$routeProvider.when(url, {
    //定义模板字符串
    template: string,

    //定义模板文件
    templateUrl: string,

    //添加控制器
    controller: string, function 或 array,

    //为控制器指定别名
    controllerAs: string,

    //重定向的地址
    redirectTo: string, function,

    //指定当前controller依赖的其他模块
    resolve: object&lt;key, function&gt;
});
</code></pre><h1 id="angularsjs-">angularsjs参考手册</h1>
<h2 id="angularjs-">AngularJS 指令</h2>
<p>本教程中使用的 AngularJS 指令：</p>
<table>
<thead>
<tr>
<th style="text-align:left">指令</th>
<th style="text-align:left">描述</th>
<th style="text-align:left">讲解</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">ng_app</td>
<td style="text-align:left">定义应用程序的根元素。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-directives.html">指令</a></td>
</tr>
<tr>
<td style="text-align:left">ng_bind</td>
<td style="text-align:left">绑定 HTML 元素到应用程序数据。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-intro.html">简介</a></td>
</tr>
<tr>
<td style="text-align:left">ng_click</td>
<td style="text-align:left">定义元素被单击时的行为。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-html-events.html">HTML 事件</a></td>
</tr>
<tr>
<td style="text-align:left">ng_controller</td>
<td style="text-align:left">为应用程序定义控制器对象。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-controllers.html">控制器</a></td>
</tr>
<tr>
<td style="text-align:left">ng_disabled</td>
<td style="text-align:left">绑定应用程序数据到 HTML 的 disabled 属性。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-html-dom.html">HTML DOM</a></td>
</tr>
<tr>
<td style="text-align:left">ng_init</td>
<td style="text-align:left">为应用程序定义初始值。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-directives.html">指令</a></td>
</tr>
<tr>
<td style="text-align:left">ng_model</td>
<td style="text-align:left">绑定应用程序数据到 HTML 元素。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-directives.html">指令</a></td>
</tr>
<tr>
<td style="text-align:left">ng_repeat</td>
<td style="text-align:left">为控制器中的每个数据定义一个模板。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-directives.html">指令</a></td>
</tr>
<tr>
<td style="text-align:left">ng_show</td>
<td style="text-align:left">显示或隐藏 HTML 元素。</td>
<td style="text-align:left"><a href="https://www.w3cschool.cn/angularjs/angularjs-html-dom.html">HTML DOM</a></td>
</tr>
</tbody>
</table>
<hr>
<h2 id="angularjs-">AngularJS 过滤器</h2>
<p>本教程中使用的 AngularJS 过滤器：</p>
<table>
<thead>
<tr>
<th style="text-align:left">过滤器</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">currency</td>
<td style="text-align:left">格式化数字为货币格式。</td>
</tr>
<tr>
<td style="text-align:left">filter</td>
<td style="text-align:left">从数组项中选择一个子集。</td>
</tr>
<tr>
<td style="text-align:left">lowercase</td>
<td style="text-align:left">格式化字符串为小写。</td>
</tr>
<tr>
<td style="text-align:left">orderBy</td>
<td style="text-align:left">根据某个表达式排列数组。</td>
</tr>
<tr>
<td style="text-align:left">uppercase</td>
<td style="text-align:left">格式化字符串为大写。</td>
</tr>
</tbody>
</table>

          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>